Validations in Extjs textfield

maskRe:- It’s a type of validation that’s allow user to enter only specific type of data,that’s define in maskRe validation section. Suppose we want that user only entered text in textfield,and no special expression like “- , =, +, /”, allow, then we give under textfield section, “maskRe: /[A-Za-z]/ ”.

This expression work as a validation that’s allow only capital and small letters in text box.

e.g:-  

{
        xtype: 'textfield',
        fieldLabel: 'Father name',
        name: 'FatherName',
        maxLength: 8,
        enforceMaxLength: true,
        maskRe: /[^@#$%&*0-9^]/, //validation tool for  write only alphabets in extfield
        margin: '0 0 0 10',
        itemId: 'txtfatherName',
    }

 

Listeners in Extjs:

Listeners is also a important features of Extjs, That’s provide facility to user call any back in function in UI section. And access controller-function for specific task. Suppose we want to call a function of controller that’s call a alert box, whose print ‘Hello Buddy’. Then we declare and define controller method or function in controller section. And that’s method call in UI section under listeners section. It’s invoke method of controller from UI.

Syntax of Listeners:-

listeners:{ click:’callControllerMethod’ }

e.g:-

{
            xtype: 'button',
            text: 'Submit',
            width: '25%',
            padding: 5,
            itemId: 'saveBtnId',
            listeners: //implement listener for call function of controller
            {
                click: 'saveClick' //call method of controller on button click
            }
        }

 

Method Of controller:

saveClick: function () {   //define save function on save button click  alert(‘hello buddy’);
                                         }

 

Trigger In Extjs: 

Trigger is type of component in Extjs. Its provide functionality of browse

button and allow user to browse any data on trigger click. We can also

create a window or show grid on trigger click.

 

General example of trigger for create a user window.  

 

{
        xtype: 'trigger',//use trigger for browse user record in grid and also use as a xtfield
        fieldLabel: 'Name',
        name: 'Name',
        itemId: 'txtName',
        maxLength: 8,
        enforceMaxLength: true,
        maskRe: /[a-zA-Z]/,//another way to define validation
        style: 'text-align:left',
        //labelStyle:'font-weight:bold;color:Blue',
        //labelAlign: 'top',
        //width: '95%',
        margin: '5 0 0 10',
        triggerCls: 'x-form-search-trigger', //for browse symbol
        onTriggerClick: function () {   //define function on trigger click
            var window = Ext.create('app.view.UserWindow');  //create popup window
            window.show();  //call show mwthod
        }
    }